<template>
    <div>
        <div class="add-btn">
            <el-button size="small" type="success" @click="goAdd">添加</el-button>
        </div>

        <div>
            <el-table :data="listData" border class="list-data" style="width: 100%">
                <el-table-column prop="id" label="" width="60"></el-table-column>
                <el-table-column align="center" label="更改栏目" width="160">
                    <template #default="scope">
                        <select-category
                            :key="scope.row.id"
                            v-if="scope.row"
                            @handle="
                                (cid) => {
                                    changeCategory(scope.row.id, cid)
                                }
                            "
                            :id="scope.row.category_id"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column align="center" label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" type="danger" @click="preDelete(scope.row)"
                            >删除</el-button
                        >
                        <el-button size="small" type="primary" @click="goEdit(scope.row)"
                            >修改</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="changePage"
                :current-page="reqPageParam.pn"
                :page-size="pageData.ps"
                :total="pageData.total"
            />
        </div>

        <!-- 删除提示框 -->
        <el-dialog title="提示" v-model="deleteVisible" width="300px" center>
            <div class="del-dialog-cnt">确定删除:{{ deleteItem.title }}？</div>
            <template #footer>
                <span>
                    <el-button @click="deleteVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteRow">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { get } from '@/util/request'
import router from '@/router'
import config from '@/config'
import { usePageStore } from '@/store/page'

const pageStore = usePageStore()
const deleteVisible = ref(false)
const listData = ref([])
const pageData = ref({})
const deleteItem = ref(null)
const reqPageParam = ref({
    pn: 1,
    ps: config.ps
})

const changeCategory = (id, cid) => {
    get('/article/change-category?id=' + id + '&cid=' + cid).then((resp) => {
        getData()
    })
}

// 记录要删除的条目
const preDelete = (inst) => {
    deleteItem.value = inst
    deleteVisible.value = true
}

// 删除条目
const deleteRow = () => {
    get('/article/delete?id=' + deleteItem.value.id).then((resp) => {
        getData()
        deleteVisible.value = false
    })
}
const getData = () => {
    reqPageParam.value.pn = pageStore.pn
    get('/article/get', reqPageParam.value).then((resp) => {
        listData.value = resp.insts
        pageData.value = {
            total: resp.instNum,
            ps: resp.ps
        }
    })
}

const goAdd = () => {
    router.push({ name: 'add-article' })
}

onMounted(() => {
    getData()
})

const changePage = (pn) => {
    pageStore.setPn(pn)
    getData()
}

const goEdit = (inst) => {
    router.push({ name: 'update-article', query: { id: inst.id } })
}
</script>
